<!--
 * @Description: 
 * @Author: hanyu
 * @Date: 2022-03-09 02:32:29
 * @LastEditTime: 2022-03-18 09:43:06
 * @LastEditors: hanyu
-->
<template>
    <div ref="dom" class="chart-box" @click="onPage"></div>
</template>

<script>
import * as echarts from 'echarts';
import { on, off } from '@/lib/utils';
export default {
  // 柱状图
  name: 'chartBar',
  props: {
    // map类型 keys 为图表x轴 values 为图表y轴数据
    value: {
      type: Array,
      require: true
    }
  },
  data() {
    return {
      dom: null
    };
  },
  watch: {
    value: {
      handler(e) {
        if (e && e.length > 0) {
          this.setChart()
        }
      },
      immediate: true,
      deep: true,
    }
  },
  methods: {
    onPage() {
      this.$router.push({
        name: 'WebData'
      })
    },
    setChart() {
      this.$nextTick(() => {
        let xAxisData = this.value.map((item) => { return item.cate_name })
        let data = this.value.map((item) => { return item.website_count })
        let seriesData = []
        const color = [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 1, color: '#E86D70'
            }, {
              offset: 0, color: '#E8A6A8'
            }]
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 1, color: '#F5916F'
            }, {
              offset: 0, color: '#F9BCBB'
            }]
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 1, color: '#F6B573'
            }, {
              offset: 0, color: '#FFD4AE'
            }]
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 1, color: '#EAD481'
            }, {
              offset: 0, color: '#EFE3BA'
            }]
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 1, color: '#B3D895'
            }, {
              offset: 0, color: '#D8FBB9'
            }]
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 1, color: '#70D6B3'
            }, {
              offset: 0, color: '#B1FFD9'
            }]
          },
        ]
        data.forEach((item, index) => {
          let obj = {
            value: item,
            itemStyle: {
              color: color[index]
            },
            label: {
              show: true,
              position: 'top',
              color: '#ffffff',
              fontWeight: 'bold'
            }
          }
          seriesData.push(obj)
        });
        let option = {
          title: {
            text: this.text,
            subtext: this.subtext,
            x: 'center'
          },
          grid: {
            left: '12%',
            bottom: '18%'
          },
          xAxis: {
            type: 'category',
            data: xAxisData,
            axisLabel: {
              show: true,
              color: '#ffffff',
              fontSize: 12,
              interval: 0,
            },
            axisLine: {
              show: false,
            },
            nameTextStyle: {
              fontSize: 14
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
            },
          },
          tooltip: {
            show: true,
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              color: '#ffffff',
              fontSize: 14
            },
          },
          series: [{
            data: seriesData,
            barWidth: '30%',
            type: 'bar'
          }]
        };
        this.dom = echarts.init(this.$refs.dom);
        this.dom.setOption(option);
        on(window, 'resize', this.resize);
      });

    },
    resize() {
      this.dom.resize();
    }
  },
  mounted() {
  },
  beforeDestroy() {
    off(window, 'resize', this.resize);
  }
};
</script>

<style lang='less' scoped>
.chart-box {
  width: 100%;
  height: 100%;
  padding-top: 20px;
}
</style>